<template>
  <div class="jobSearchListContainer">
    <div class="jobSearchList">
      <div class="jobSearchListTitle">
        <div class="jobSearchListTitleContent">
          <div class="titleFlag" />
          国家公务员考试岗位
        </div>
        <div class="searchInputContainer">
          <div class="searchInputInner">
            <el-input v-model.trim="matchZpName" placeholder="输入岗位关键词" size="small" class="searchInput"
              @keyup.enter.native="inputSearch" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
            <el-button type="primary" size="small" @click="inputSearch">搜 索</el-button>
          </div>
        </div>
        <div class="moreCategory" @click="handleMoreCivilJob">
          <span> 岗位更多分类查找</span><i class="el-icon-arrow-right arrow"></i>
        </div>
      </div>
      <div :class="{ JobSearchListInner: true, canScroll: canScroll }" @scroll="handleListScroll"
        ref="JobSearchListInner" v-loading="loading">
        <div class="dataOverview">
          <div class="yearBox">
            <span class="year">{{ year || '-' }}年</span>
            <span>{{ regionName }}岗位</span>
          </div>
          <div class="dataBox">
            <div class="dataItem" v-for="item in dataOverviewList" :key="item.name">
              <div class="beforeIcon">
                <img :src="item.beforeIcon" class="beforeIconClass" />
              </div>
              <div class="dataItemContent">
                <span class="dataItemName">{{ item.name }}</span>
                <span class="dataItemValue">{{ item.value }}</span>
              </div>
              <img :src="item.afterIcon" class="afterIconClass" />
            </div>
          </div>
        </div>
        <div class="chartBox">
          <div class="item">
            <historyCivilExamAverageChart :name="regionName" :xData="chartYearList1" :yData="chartPassScoreList">
            </historyCivilExamAverageChart>
          </div>
          <div class="item">
            <historyCivilExamPersonNumChart :name="regionName" :xData="chartYearList2"
              :yData="chartPeopleSubmitNumList"></historyCivilExamPersonNumChart>
          </div>
        </div>
        <template v-if="jobList.length > 0">
          <div class="JobSearchItem" @click="toJobDetail(jobItem)" v-for="jobItem in jobList" :key="jobItem.id">
            <div class="JobSearchItemTop">
              <el-tooltip :content="jobItem.jobName" placement="top" :open-delay="300" effect="light">
                <div class="JobSearchItemTopLeft">
                  {{ jobItem.jobName }}
                </div>
              </el-tooltip>
              <div class="JobSearchItemTopMiddle">
                <div class="companyInfo">
                  <el-tooltip :content="jobItem.employmentDepartment" placement="top" :open-delay="300" effect="light">
                    <div class="companyName">
                      {{ jobItem.employmentDepartment }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
              <div class="JobSearchItemTopRight">
                <div class="recruitmentNum">
                  <span class="text">招录人数</span>
                  <span class="num">{{ jobItem.jobPeopleNum }}</span>
                </div>
                <div class="registerNum">
                  <span class="text">报考人数</span>
                  <span class="num">{{ jobItem.peopleSubmitNum }}</span>
                </div>
                <div class="deadline">
                  <span>（截止至{{ jobItem.deadline }}）</span>
                </div>
              </div>
            </div>
            <div class="JobSearchItemMiddle">
              <div class="JobSearchItemMiddleLeft">
                <span class="title">招考条件：</span>
                <span class="text line">{{ jobItem.eduDesc }}</span>
                <span class="text line">{{ jobItem.politicalStatusDesc }}</span>
                <span class="text">{{ jobItem.major }}</span>
              </div>
              <div class="JobSearchItemMiddleRight">
                <span class="title">考试类别：</span>
                <span class="text">{{ jobItem.examCategory }}</span>
              </div>
            </div>
            <div class="JobSearchItemBottom">
              <div class="JobSearchItemBottomLeft">
                <span>工作地址：</span>
                <span>{{ jobItem.workPlace || '' }}</span>
              </div>
              <div class="JobSearchItemBottomMiddle">
                <span>岗位介绍：</span>
                <span>{{ jobItem.jobIntroduction }}</span>
              </div>
              <div class="JobSearchItemBottomRight">
                <span>岗位代码：</span>
                <span>{{ jobItem.jobCode }}</span>
              </div>
            </div>
          </div>
        </template>
        <Empty description="暂无相关岗位" v-else></Empty>
        <div class="isLoading" v-if="!noMore">正在加载中~</div>
        <div class="isLoading" v-if="noMore">没有更多啦~</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Empty } from "element-ui";
import { throttle } from "lodash";
import {
  getCivilPositionList,
  getCivilStat,
  getCivilChartData,
} from "@/api/civil-job";
import historyCivilExamAverageChart from "./historyCivilExamAverageChart.vue";
import historyCivilExamPersonNumChart from "./historyCivilExamPersonNumChart.vue";
export default {
  name: "civilJobSearchList",
  components: {
    historyCivilExamAverageChart,
    historyCivilExamPersonNumChart,
    Empty,
  },
  props: {
    selectedCivilJobClass: {
      type: Object,
      default: () => {},
    },
    yearList: {
      type: "",
      default: "",
    },
  },
  computed: {
    canScroll() {
      return this.$store.state.settings.canScroll;
    },
  },
  data() {
    return {
      noMore:false,
      loading: false,
      matchZpName: "",
      regionName: "",
      year: "",
      jobList: [],
      loading: false,
      pageParams: {
        pageNo: 1,
        pageSize: 20,
      },
      dataOverviewList: [
        {
          name: "招考岗位",
          value: 0,
          beforeIcon:
            "https://img3.job1001.com/data_center/images/beforeIcon1.png",
          afterIcon:
            "https://img3.job1001.com/data_center/images/afterIcon1.png",
        },
        {
          name: "招录人数",
          value: 0,
          beforeIcon:
            "https://img3.job1001.com/data_center/images/beforeIcon2.png",
          afterIcon:
            "https://img3.job1001.com/data_center/images/afterIcon2.png",
        },
        {
          name: "报名人数",
          value: 0,
          beforeIcon:
            "https://img3.job1001.com/data_center/images/beforeIcon3.png",
          afterIcon:
            "https://img3.job1001.com/data_center/images/afterIcon3.png",
        },
        {
          name: "最高竞争比",
          value: "0",
          beforeIcon:
            "https://img3.job1001.com/data_center/images/beforeIcon4.png",
          afterIcon:
            "https://img3.job1001.com/data_center/images/afterIcon4.png",
        },
      ],
      chartYearList1: [],
      chartYearList2: [],
      chartPeopleSubmitNumList: [],
      chartPassScoreList: [],
      from:"",
    };
  },
  watch: {
    selectedCivilJobClass: {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        console.log("civilJobSearchList selectedCivilJobClass 更新啦", newValue);

        if (!newValue.year.length) {
          // this.$message.error("请选择年份");
          return;
        }
        this.year = newValue.year[0];
        this.pageParams.pageNo = 1;
        this.noMore=false;
        this.regionId =
          newValue.regionId.length > 0
            ? newValue.regionId[0].split("-")[0]
            : "100000";
        this.regionName =
          newValue.regionId.length > 0
            ? newValue.regionId[0].split("-")[1]
            : "全国";
        this.getCivilChartDataFn();
        this.getCivilPositionListFn();
        this.getStateCivilStatFn();
      },
    },
    yearList: {
      handler(newValue, oldValue) {
        this.getCivilChartDataFn();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    // 使用 lodash 的 throttle 函数来防抖
    this.handleListScroll = throttle(this.handleListScroll, 1000);
    this.from=this.$route.query.from;
  },
  methods: {
    async getCivilChartDataFn() {
      const params = {
        years: this.yearList,
        regionId: this.regionId,
        regionLevel: 0,
      };
      const res = await getCivilChartData(params);
      const chartYearList1 = [],
        chartYearList2 = [],
        chartPeopleSubmitNumList = [],
        chartPassScoreList = [];
      if (res.code == 200) {
        res.data.forEach((item) => {
          if (
            item.passScore &&
            item.passScore != "0" &&
            item.passScore != "0.0"
          ) {
            chartYearList1.push(item.year);
            chartPassScoreList.push(item.passScore);
          }
          if (
            item.peopleSubmitNumW &&
            item.peopleSubmitNumW != "0" &&
            item.peopleSubmitNumW != "0.0"
          ) {
            chartYearList2.push(item.year);
            chartPeopleSubmitNumList.push(item.peopleSubmitNumW);
          }
        });
        this.chartYearList1 = chartYearList1.reverse();
        this.chartPassScoreList = chartPassScoreList.reverse();
        this.chartYearList2 = chartYearList2.reverse();
        this.chartPeopleSubmitNumList = chartPeopleSubmitNumList.reverse();
      }
    },
    async getStateCivilStatFn() {
      const params = {
        year: this.selectedCivilJobClass.year[0],
        // 如果是按机构性质查找，则是查询全国的数据
        regionId: this.regionId,
        regionLevel: 0,
      };
      const res = await getCivilStat(params);
      if (res.code == 200) {
        let competitionRatio = res.data.competitionRatio
          ? res.data.competitionRatio.replace(":", " : ")
          : "-";
        this.dataOverviewList[0].value = this.checkString(res.data.jobNum);
        this.dataOverviewList[1].value = this.checkString(
          res.data.jobPeopleNum
        );
        this.dataOverviewList[2].value = this.checkString(
          res.data.peopleSubmitNum
        );
        this.dataOverviewList[3].value = competitionRatio;
      }
    },
    checkString(val) {
      if (val == "0" || val == "0.0" || !val) {
        return "-";
      } else {
        return val;
      }
    },
    handleMoreCivilJob() {
      let routeData = this.$router.resolve({
        path: `/all-civil-job?year=${this.selectedCivilJobClass.year[0]}&from=${this.$route.query.from}`,
      });
      window.open(routeData.href, "_blank");
    },
    getCivilPositionListFn() {
      if(this.noMore)return;
      this.loading = true;
      const params = {
        edu: this.selectedCivilJobClass.edu[0],
        regionId: this.regionId,
        year: this.selectedCivilJobClass.year[0],
        politicalStatus: this.selectedCivilJobClass.politicalStatus[0],
        jobName: this.matchZpName.replace(/\s+/g, ""),
        pageNo: this.pageParams.pageNo,
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
      };
      this.loading = true;
      getCivilPositionList(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            if (this.pageParams.pageNo == 1) {
              this.jobList = res.data;
            } else {
              this.jobList = [...this.jobList, ...res.data];
            }
            console.log('this.jobList.length>=res.pageparam.sums',this.jobList.length,res.pageparam.sums);
            
            if(this.jobList.length>=res.pageparam.sums){
              this.noMore=true;
            }
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    toJobDetail(item) {
      let routeData = this.$router.resolve({
        path: `/civil-job-detail?id=${item.id}&year=${this.selectedCivilJobClass.year[0]}&from=${this.$route.query.from}`,
      });
      window.open(routeData.href, "_blank");
    },
    handleListScroll(e) {
      const container = this.$refs.JobSearchListInner;
      const scrollTop = container.scrollTop; // 滚动的距离
      const scrollHeight = container.scrollHeight; // 内容的总高度
      const clientHeight = container.clientHeight; // 容器的可见高度

      // 判断距离底部小于200px时触发加载
      if (scrollHeight - scrollTop - clientHeight < 400) {
        this.load();
      }
    },
    load() {
      this.pageParams.pageNo = parseInt(this.pageParams.pageNo) + 1;
      this.getCivilPositionListFn();
    },
    inputSearch() {
      this.pageParams.pageNo = 1;
      this.getCivilPositionListFn();
    },
  },
};
</script>

<style lang="scss" scoped>
.jobSearchListContainer {
  display: flex;
  justify-content: space-between;
  flex:1;
  width: calc(100% - 219px);
  margin: 0 12px 0 0;
  z-index: 2; //很重要
  min-width: 800px;
  .jobSearchList {
    width: 100%;
    background: #f1f4f9;
    border-radius: 18px;
    padding: 14px 8px 0 20px;
    .jobSearchListTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 600;
      .jobSearchListTitleContent {
        display: flex;
        align-items: center;
      }
      .searchInputContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        .searchInputInner {
          display: flex;
          width: 60%;
          margin: 0 177px 0 127px;
        }
        ::v-deep .el-button {
          height: 40px;
          width: 88px;
          margin-left: -7px;
          border-radius: 0 8px 8px 0;
          background: #4880ff;
          border: 1px solid #4880ff;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          font-style: normal;
        }
        ::v-deep .el-input {
          position: relative;
          height: 40px;
        }
        ::v-deep .el-input__inner {
          height: 40px;
          border-radius: 8px;
          border: 2px solid #4880ff;
          & + .el-input__prefix {
            .el-input__icon:after {
              margin-top: 5px;
            }
          }
          &::placeholder {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #b1b3c7;
            line-height: 20px;
          }
        }
      }
      .moreCategory {
        font-family: PingFangSC, PingFang SC;
        font-size: 14px;
        font-weight: 400;
        color: #4880ff;
        margin-left: auto;
        margin-right: 26px;
        cursor: pointer;
        .arrow {
          margin-left: 4px;
        }
      }
      .titleFlag {
        width: 4px;
        height: 17px;
        border-radius: 32px;
        background-color: #409eff;
        margin-right: 8px;
      }
    }
    .JobSearchListInner {
      width: 100%;
      height: calc(100vh - 239px); //重要
      overflow: hidden;
      padding-right: 14px;
      padding-top: 22px;
      &.canScroll {
        overflow-y: scroll;
        padding-right: 10px; // 滚动条的出现会占据宽度，所以要padding-right要配合滚动条的宽度动态变化
      }
      .dataOverview {
        display: flex;
        margin-bottom: 10px;
        .yearBox {
          width: 102px;
          height: 78px;
          border-radius: 8px;
          background: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 16px;
          .year {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #d5413d;
            margin-bottom: 8px;
          }
        }
        .dataBox {
          flex: 1;
          margin-left: 10px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 10px;
          .dataItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px;
            background: #fff;
            border-radius: 8px;
            border: 1px solid #eaedf7;
            .beforeIcon {
              border-radius: 8px;
              margin-right: 12px;
              .beforeIconClass {
                width: 40px;
                height: 40px;
              }
            }
            .dataItemContent {
              display: flex;
              flex-direction: column;
              .dataItemName {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #a2a5b3;
                margin-bottom: 9px;
              }
              .dataItemValue {
                font-family: D-DIN-PRO-800-ExtraBold;
                font-weight: bold;
                font-size: 24px;
                color: #242f57;
              }
            }
            .afterIconClass {
              width: 40px;
              height: 40px;
              margin-left: auto;
            }
          }
        }
      }
      .chartBox {
        display: flex;
        margin-bottom: 10px;
        height: 294px;
        .item {
          flex: 1;
          padding: 10px;
          margin-right: 10px;
          border-radius: 8px;
          background-color: #fff;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .JobSearchItem {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        // height: 88px;
        background: rgba(252, 252, 252, 1);
        border-radius: 9px;
        // border: 1px solid #f0f0f0;
        margin-bottom: 14px;
        transition: 0.2s ease-out;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.2s;
        &:hover {
          border-color: #0b6eff;
          transition-delay: 0.2s;
          transform: translateY(-10%);
          .JobSearchItemTop {
            color: #0b6eff;
            transition-delay: 0.2s;
          }
          .JobSearchItemBottom {
            background: #0b6eff;
            transition-delay: 0.2s;
            color: #fff;
          }
        }
        &:before {
          content: "";
          position: absolute;
          width: 400px;
          height: 120%;
          background-color: rgba(11, 110, 255, 0.05);
          top: 50%;
          transform: skewX(30deg) translate(-100%, -50%);
          transition: all 0.4s;
        }
        &:hover::before {
          transform: skewX(30deg) translate(480%, -50%);
          transition-delay: 0.1s;
        }
        .JobSearchItemTop {
          display: flex;
          // height: 89px;
          padding-left: 15px;
          padding-right: 15px;
          padding-top: 16px;
          position: relative;
          transition: all 0.5s;
          .JobSearchItemTopLeft {
            width: 43%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-right: 70px;
            font-weight: bold;
            color: #222222;
          }
          .JobSearchItemTopMiddle {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            margin-right: 70px;
            .companyInfo {
              .companyName {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 16px;
                color: #222222;
                text-align: left;
                font-style: normal;
                margin-bottom: 17px;
                max-width: 260px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .JobSearchItemTopRight {
            flex-shrink: 0;
            flex-wrap: nowrap;
            margin-left: auto;
            display: flex;
            .recruitmentNum,
            .registerNum {
              font-size: 16px;
              font-weight: bolder;
              .text {
                color: #242323;
              }
              .num {
                font-family: D-DIN-PRO-500-Medium;
                color: #d5413d;
                font-size: 18px;
                margin-left: 6px;
              }
            }
            .registerNum {
              margin-left: 22px;
            }
            .deadline {
              font-family: PingFang-SC, PingFang-SC;
              font-size: 14px;
              color: #a8abb8;
            }
          }
        }
        .JobSearchItemMiddle {
          display: flex;
          padding: 4px 16px 18px 16px;
          .JobSearchItemMiddleLeft,
          .JobSearchItemMiddleRight {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 13px;
            color: #a2a5b3;
          }
          .JobSearchItemMiddleLeft {
            flex: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-right: 90px;
            .text {
              padding: 0 12px;
              &:nth-child(2) {
                padding-left: 0;
              }
            }
            .line {
              position: relative;
              &::after {
                position: absolute;
                right: 0;
                top: 50%;
                content: "";
                width: 1px;
                height: 11px;
                background: #e5e6eb;
                transform: translateY(-40%);
              }
            }
          }
          .JobSearchItemMiddleRight {
            margin-left: auto;
          }
        }
        .JobSearchItemBottom {
          letter-spacing: 0.5px;
          position: relative;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 16px;
          padding-right: 17px;
          width: 100%;
          height: 48px;
          background: linear-gradient(
            276deg,
            rgba(218, 240, 247, 0.1) 0%,
            rgba(230, 240, 255, 0.3) 100%
          );
          border-radius: 0px 0px 6px 6px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9cabb7;
          transition: all 0.5s;
          & > div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .JobSearchItemBottomLeft {
            flex: 1;
          }
          .JobSearchItemBottomMiddle {
            flex: 2;
            margin-left: 24px;
          }
          .JobSearchItemBottomRight {
            width: 170px;
            margin-left: 24px;
          }
        }
      }
      .isLoading {
        display: flex;
        justify-content: center;
        padding: 24px;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 4px;
  background-color: #f1f4f9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(207, 216, 230, 1);
  border-radius: 2px;
}
</style>
